<template>
    <div class="commentitems">
      <div  v-for="(item,index) in commentChild" :key="index">
        <div class="commentItem">
          <div class="userImg">
            <img src="../../images/userimg.jpg" alt="">
          </div>
          <div class="commentcontent">
            <p>
              <span   v-if="item.userinfo">{{item.userinfo.name}}</span>
              <span v-else>此用户无姓名</span>
              <span>{{item.comment_date}}</span>
            </p>
            <div v-if="!temp">
              <span style="display: inline-block;width: 60vw;">{{item.comment_content}}</span>
              <span class="publish">回复</span>
            </div>
            <div v-else>
              回复 <span style="color:#478ef0">{{item.parent_user_info.name}}：</span>
              <span style="display: inline-block;width: 60vw;">{{item.comment_content}}</span>
              <span @click="publishClick(item.comment_id)" class="publish">回复</span>
            </div>
          </div>
        </div>
        <comment-item :temp="true" :commentChild="item.child"></comment-item>
      </div>
    </div>
</template>

<script>
    export default {
      props:['commentChild','temp'],
        name: "commentItem",
        data() {
            return {}
        },
        methods: {
          publishClick(id){
            this.$emit('publishClick',id)
          }
        }
    }
</script>

<style scoped lang="less">
  p,span{
    background-color: white;
  }
  .commentitems{

  }
  .commentItem{
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
    .userImg{
      margin-right: 3vw;
      width: 11vw;
      height: 11vw;
      display: flex;
      img{
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .commentcontent{
      p{
        font-size: 3.3vw;
        color: #7f7f7f;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.9vw;
      }
      div{
        font-size: 3.5vw;
      }
      .publish{
        float: right;
        color: red;
      }
    }
  }
</style>
